<style>
#charts {
    width: 100%;
    height: 425px;
    position: relative;
    margin: 0 auto;
    font-size: 8px;
}

.chartdiv {
    width: 100%;
    height: 425px;
    position: absolute;
    top: 0;
    left: 0;
}       
</style>


<template>
    <div class='portlet light bordered'>
        <div class='portlet-title'>
            <div class='caption'>
                <span class='caption-subject bold uppercase font-dark'>比赛报名统计</span>
            </div>
        </div>
        <div class='portlet-body' style="height: 425px">
            <div class="row">
                <div class="col-md-12">
                    <div id="chart1" class="chartdiv"></div>  
                    <div id="chart2" class="chartdiv"></div>  
                    <div id="chart3" class="chartdiv"></div>
                </div>
            </div>
        </div>
    </div>  
</template>

<script>

import AmCharts from 'amcharts3/amcharts/amcharts.js';
import 'amcharts3/amcharts/themes/light.js';
import 'amcharts3/amcharts/pie.js';
import _sumBy from 'lodash/sumBy';
import _reduce from 'lodash/reduce';
import _find from 'lodash/find';
import _flatMap from 'lodash/flatMap';

export default {
    mounted() {
        this.$DashboardService.StatCompeteCountWithGroup()
            .then(ret => {
                this.initChart(ret);
            });
    },
    methods: {

        // 初始化图表
        initChart(data) {
            window.AmCharts.addInitHandler(function(chart) {
  
                // init holder for nested charts
                if (window.AmCharts.nestedChartHolder === undefined)
                    window.AmCharts.nestedChartHolder = {};

                if (chart.bringToFront === true) {
                    chart.addListener("init", function(event) {
                    // chart inited
                    var chart = event.chart;
                    var div = chart.div;
                    var parent = div.parentNode;
                    
                    // add to holder
                    if (window.AmCharts.nestedChartHolder[parent] === undefined)
                        window.AmCharts.nestedChartHolder[parent] = [];
                        window.AmCharts.nestedChartHolder[parent].push(chart);
                        
                        // add mouse mouve event
                        chart.div.addEventListener('mousemove', function() {
                            
                            // calculate current radius
                            var x = Math.abs(chart.mouseX - (chart.realWidth / 2));
                            var y = Math.abs(chart.mouseY - (chart.realHeight / 2));
                            var r = Math.sqrt(x*x + y*y);
                            
                            // check which chart smallest chart still matches this radius
                            var smallChart;
                            var smallRadius;
                            for(var i = 0; i < window.AmCharts.nestedChartHolder[parent].length; i++) {
                                var checkChart = window.AmCharts.nestedChartHolder[parent][i];
                                
                                if((checkChart.radiusReal < r) || (smallRadius < checkChart.radiusReal)) {
                                    checkChart.div.style.zIndex = 1;
                                }
                                else {
                                    if (smallChart !== undefined)
                                    smallChart.div.style.zIndex = 1;
                                    checkChart.div.style.zIndex = 2;
                                    smallChart = checkChart;
                                    smallRadius = checkChart.radiusReal;
                                }
                            }
                        }, false);
                    });
                }
            }, ["pie"]);

            // 统计总数
            let count = _sumBy(data, o => o.Count);

            window.AmCharts.makeChart("chart1", {
                "type": "pie",
                "bringToFront": true,
                "dataProvider": [{
                    "title": count.toString(),
                    "value": count,
                    "color": "#090E0F"
                }],
                "startDuration": 0,
                "pullOutRadius": 0,
                "color": "#fff",
                "fontSize": 12,
                "titleField": "title",
                "valueField": "value",
                "colorField": "color",
                "labelRadius": -25,
                "labelColor": "#fff",
                "radius": 25,
                "innerRadius": 0,
                "labelText": "[[title]]",
                "balloonText": "报名人数总计: [[value]] 人"
            });

            // 根据比赛项目统计人数
            let events = _reduce(data, (result, value) => {
                let key = value.CompeteEvent;
                let item = _find(result, { 'event': key });
                let subItem = {
                    'title': value.GroupTitle,
                    'value': value.Count
                }
                if (!item) {
                    result.push({
                        'title': value.EventTitle,
                        'event': value.CompeteEvent,
                        'value': value.Count,
                        'items': [
                            subItem
                        ]
                    });
                } else {
                    item.value += value.Count;
                    item.items.push(subItem);
                }
                return result;
            }, []);

            window.AmCharts.makeChart("chart2", {
                "type": "pie",
                "theme": "light",
                "bringToFront": true,
                "dataProvider": events,
                "startDuration": 1,
                "pullOutRadius": 0,
                "color": "#fff",
                "fontSize": 10,
                "titleField": "title",
                "valueField": "value",
                "labelRadius": -40,
                "labelColor": "#fff",
                "radius": 108,
                "innerRadius": 27,
                "outlineAlpha": 1,
                "outlineThickness": 4,
                "labelText": "[[title]] \r\n [[value]] 人",
                "balloonText": "[[title]]: [[value]] 人"
            });

            let items = _flatMap(events, o => o.items);

            window.AmCharts.makeChart("chart3", {
                "type": "pie",
                "theme": "light",
                "bringToFront": true,
                "dataProvider": items,
                "startDuration": 1,
                "pullOutRadius": 0,
                "color": "#fff",
                "fontSize": 12,
                "titleField": "title",
                "valueField": "value",
                "labelRadius": -40,
                "labelColor": "#fff",
                "radius": 180,
                "innerRadius": 110,
                "outlineAlpha": 1,
                "outlineThickness": 4,
                "labelText": "[[title]] \r\n [[value]] 人",
                "balloonText": "[[title]]: [[value]] 人"
            });
        }
    }
}
</script>

<style>

</style>
